<template>
  <div class="main" :style="{ width: allData.length * 50 + 'px' }">
    <div
      class="list"
      v-for="(item1, index1) in allData"
      :key="index1"
      :style="{
        width: '50px',
        position: 'absolute',
        left: index1 * 50 + 'px',
        transform: 'translateY(' + -position[index1] + 'px)',
      }"
    >
      <div class="content" v-for="(item2, index2) in item1" :key="index2">
        {{ item2.name }}
      </div>
      <div class="content">
        {{ item1[0].name }}
      </div>
      <div class="content">
        {{ item1[1].name }}
      </div>
      <div class="content">
        {{ item1[2].name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    allData: Array,
    result: Array,
  },
  data() {
    return {
      position: [0, 0, 0],
      forIndex: 0,
      once: [0, 0, 0],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    start() {
      setInterval(() => {
        for (let i = this.forIndex; i < this.position.length; i++) {
          let position = this.position[i];
          position += 1;
          if (position >= 450) {
            position = 0;
            this.once.splice(i, 1, (this.once[i] += 1));
            console.log(this.once);
          }
          this.position.splice(i, 1, position);
          this.handleResult(i, this.result[i]);
        }
      }, 1);
    },
    handleResult(index, str) {
      if (index === this.forIndex) {
        let distance;
        this.allData[index].forEach((i, v) => {
          if (str === i.name) {
            distance = v;
          }
        });
        if (distance === 0) {
          distance = 8;
        } else {
          distance -= 1;
        }
        if (
          distance * 50 === this.position[index] &&
          this.once[index] >= 3 + index * 1
        ) {
          this.forIndex += 1;
          if (this.forIndex === this.allData.length) {
            if (this.$parent.results.length > 0) {
              setTimeout(() => {
                this.once = [0, 0, 0];
                this.forIndex = 0;
                this.$parent.changeResult();
              }, 2000);
            }
          }
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: auto;
  height: 150px;
  background-color: red;
  position: relative;
  overflow: hidden;

  .content {
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
  }
}
</style>